<template>
    <div class="login_container">
       <div class="login_box">
           <h2>电商后台管理平台</h2>
           <!-- 登录表单 -->
           <el-form class="mt30" :model='loginForm' ref='loginFormRef' :rules='loginFormRule'>
               <el-form-item prop='username'>
                   <el-input v-model="loginForm.username" prefix-icon='iconfont icon-user' placeholder='请输入用户名'></el-input>
               </el-form-item>

                <el-form-item prop='password'>
                   <el-input type='password' show-password v-model="loginForm.password" prefix-icon='iconfont icon-password' placeholder='请输入密码'></el-input>
               </el-form-item>

                <el-form-item class="login_btns">
                   <el-button type='primary' @click='loginBtn'>登录</el-button>
                   <el-button type='info'>重置</el-button>
               </el-form-item>
           </el-form>
       </div>
    </div>
</template>

<script>
import {LoginApi} from '@/http/api'
import axios from 'axios'
    export default {
        name:'login',
        data() {
           return {
               //表单数据
               loginForm:{
                   username:'admin',
                   password:'123456'
               },
               //表单验证规则
               loginFormRule:{
                   //用户名验证规则
                   username:[
                       {required:true,message:'请输入用户用户名',trigger:'blur'},
                       {min:5,max:20,message:'用户名长度必须在5~20之间',trigger:'blur'}
                   ],
                   //密码验证规则
                   password:[
                        {required:true,message:'请输入密码',trigger:'blur'},
                         {min:5,max:20,message:'密码长度必须在5~20之间',trigger:'blur'}
                   ]
               }
           } 
        },
        methods:{
            //点击登录
            loginBtn() {
               this.$refs.loginFormRef.validate(valid=>{
                   console.log('登录是否成功：',valid)

                   //检验不通过，直接返回
                   if(!valid) return 

                   console.log('开始调用登录接口')
                   LoginApi(this.loginForm).then(res=>{
                       console.log('登录成功的结果：',res)
                   })

              

               })

            }
        }
    }
</script>

<style lang="scss" scoped>
@import '@/mixin/index.scss';
.login_container {
    background: #2b4b6b;
    width:100%;
    height: 100%;
    .login_box {
        box-sizing: border-box;
        padding: 20px;
        width:600px;
        height: 300px;
        background: #fff;
        @include vh_center;
      h2 {
          @include txt_center;
      }
    }
}

.login_btns {
    display: flex;
    justify-content: flex-end;
}

</style>